import { Button, Col, Input, Row, message } from 'antd';
import LoginBG from '@/assets/image/login_bg.png';
import QRCodePng from '@/assets/image/qrcode.jpg';
import { useNavigate } from 'react-router-dom';
import { useState } from 'react';
import { doLogin } from '@/api/user';
import { userStore } from '@/store/user';


const Login = () => {
    const useUserStore = userStore();

    const nav = useNavigate();
    const [validCode, setValidCode] = useState<string>('');
    function handleFinish() {
        if (!validCode) {
            message.error('验证码不能为空');
            return;
        }
        doLogin(validCode).then(res => {
            console.log('res', res);
            useUserStore.setUser(res);
            nav('/');
        }).catch((e) => {
            message.error(e);
        })
    }

    return <div className="login-container">
        <Row >
            <Col span={14}>
                <img style={{ width: '100%', height: '100vh' }} src={LoginBG} alt="" />
            </Col>
            <Col span={10}>
                <div className='pt-48 flex-col-center flex-col'>
                    <img src={QRCodePng} alt="" />
                    <div className='flex items-center justify-between w-[300px] mt-2'>
                        <Input onChange={(v) => setValidCode(v.target.value)} placeholder='请输入验证码' />
                        <Button className='ml-2' onClick={handleFinish}>登录</Button>
                    </div>
                </div>
            </Col>
        </Row>
    </div>
}
export default Login;